<template>
    <el-card class="update-progress">
        <div class="title-container">
            <span class="rect"></span>
            <h3>产业更新进度</h3>
        </div>
        <el-divider></el-divider>
        <el-tree :data="progressList" :default-expand-all="true" :expand-on-click-node="false" class="tree">
            <template v-slot="{ node }">
                <div class="custom-tree-node">
                    <img :class="{
                        'gray-light': isGrayLight(node), 'high-light': highlightData.id == node.data.id
                    }" class="icon" referrerpolicy="no-referrer"
                        :src="isGrayLight(node) ? 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8dddb0512cd9c9d0765df0de8330d609689e8b01a2061cf4d7286f7f68434646' : 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3d7138c78361f365b68e7662cae0697abc8e07becb56a9e7a3640131a00dcfe5'" />
                    <div class="progress-item">
                        <!-- 存在数字 -->
                        <div class="with-number">
                            <div class="prefix"
                                :class="{ 'gray-light': isGrayLight(node), 'high-light': highlightData.id == node.data.id }">
                                {{
                                    node.data.itemName }}</div>
                            <div class="suffix"
                                :class="{ 'gray-light': isGrayLight(node), 'high-light': highlightData.id == node.data.id }">
                                {{
                                    node.data.scheduleDate }}</div>
                        </div>
                    </div>
                </div>
            </template>
        </el-tree>
    </el-card>
</template>


<script>
export default {
    data() {
        return {
            progressList: [],
            progressData: [],
            highlightData: {},
            grayData: []
        }
    },
    props: {
        landid: String
    },
    mounted() {
    },
    methods: {
        isGrayLight(node) {
            return this.grayData.find(i => i.id == node.data.id) !== undefined
        },
        computedItemName(node) {
            return node.label.slice(0, -10)
        },
        computedItemDate(node) {
            return node.label.slice(-10)
        },
        async init() {
            this.highlightData = {}
            this.grayData = []
            let tempProgressList = [];
            let api = window.$crud("land/companySchedule/dir/list");
            let res = await api.getInfo({
                landid: this.landid
            });
            if (res.data.code === 200) {
                res.data.data.rows.forEach(i => {
                    let list = {
                        id: i.id,
                        parentId: i.parentId,
                        scheduleDate: "",
                        itemName: i.itemName,
                    }
                    if (i.companyList.length && i.companyList[0].scheduleDate) {
                        const date = this.lr_dateFormat(i.companyList[0].scheduleDate, 'yyyy-MM-dd')
                        list.scheduleDate = date
                    }
                    // if (list.scheduleDate || (list.children && list.children.length)) {
                    //     this.highlightData = list
                    // } else {
                    //     this.grayData.push(list)
                    // }
                    tempProgressList.push(list)
                })
                let tempProgressListWithId = tempProgressList.filter(i => i.parentId === "0")
                let tempProgressListWithoutId = tempProgressList.filter(i => i.parentId !== "0")
                tempProgressListWithId.forEach(i => i.children = [])
                tempProgressListWithoutId.forEach(i => {
                    tempProgressListWithId.find(i2 => {
                        if (i2.id === i.parentId) {
                            i2.children.push(i)
                        }
                    })
                })
                tempProgressListWithId.forEach(i => {
                    i.label = i.itemName
                    if (i.children.length !== 0) {
                        i.children.forEach(i2 => {
                            i2.label = i2.itemName
                        })
                    }
                })
                tempProgressListWithId.forEach(i => {
                    if (i.scheduleDate) {
                        this.highlightData = i
                    } else if (i.children.length) {
                        if (i.children.find(j => j.scheduleDate !== "") !== undefined) {
                            this.highlightData = i;
                        } else {
                            i.children.forEach(j => {
                                this.grayData.push(j)
                            })
                            this.grayData.push(i)
                        }
                    } else {
                        this.grayData.push(i)
                    }
                })
                this.progressList = tempProgressListWithId;
                this.$emit("provideData", this.progressList[this.progressList.length - 1].scheduleDate)
            }

        },
    }
}
</script>


<style scoped lang='scss'>
::v-deep .el-divider--horizontal {
    margin: 5px 0;
}

.update-progress {
    width: 33%;
}


.update-progress ::v-deep .el-card__body {
    // min-height: 406px !important;
}

::v-deep .el-tree-node__content i {
    font-size: 14px;
}

::v-deep .el-card__body {
    height: 100%;
}

.tree {
    height: calc(100% - 35px);
    overflow-y: auto;
}

.custom-tree-node {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: rgba(247, 250, 255, 1);

    .high-light {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        color: #306CED;
    }

    .gray-light {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: normal;
        color: #8C8C8C;
    }

    .icon {
        width: 20px;
        height: 20px;
        margin: 1px 0 0 19px;
    }

    .progress-item {
        width: 100%;
        color: #2c3034;
        margin-left: 10px;


        .with-number {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: rgba(0, 0, 0, 0.9);
            font-size: 14px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;

            .prefix {}

            .suffix {
                margin-right: 10px;
            }
        }
    }
}

::v-deep .el-tree-node__expand-icon {
    display: none;
}
</style>